
<template>
	<view class="live-header">
		<view class="header-right round">
			<view class="header-image justify-center bg-white round align-center">
				<image class="header-image-img" :src="liveData && liveData.user ? liveData.user.avatar : ''"/>
			</view>
			<view class="header-shop">
				<text class="header-shop-text"> {{ formatEllipsis(liveData && liveData.user ? liveData.user.nickname : '', 16) }} </text>
				<!-- <view class="header-shop-info">
					<text class="header-shop-info-text">{{ numFormat(online_num) }} 人观看</text>
				</view> -->
			</view>
			
			<view class="header-btn" @tap="handleFollow()" v-if="!liveData.is_follow">
				<text class="header-btn-text">关注</text>
			</view>
			
			<view class="header-btn" @tap="handleFollow()" v-if="liveData.is_follow">
				<text class="header-btn-text">取消关注</text>
			</view>
		</view>
		
		<view class="header-left">
			<view class="image-box">
				<image :src="item" class="userImage"
				v-for="(item, index) in userList" :key="index"></image>
			</view>
			<view class="online_num_box">
				<text class="online_num">{{ numFormat(online_num) }}</text>
			</view>
			<view class="wanl-btn" @tap="back()">
				<image src="/static/images/live_close.png" class="close-image"></image>
			</view>
		</view>
	</view>
</template>
<script>
	import {BASE_URL} from '@/env.js'
	
	export default {
		name: "LiveHeader",
		props: {
			state: {
				default: 0
			},
			liveData: {
				type: Object,
				default: null
			}
		},
		data() {
			return {
				online_num: 0,
				userList:[],
			}
		},
		mounted(){
			console.log("go mounted", this.liveData);
		},
		methods: {
			editOlineNum(num){
				console.log("go editOlineNum", num);
				this.online_num = num.num;
				this.userList = num.userlist;
			},
			back() {
				this.$emit('back');
			},
			async handleFollow() {
				
				if (this.$store.state.user.isLogin) {
					
					uni.request({
						url: '/live/follow',
						data:{
							id: this.liveData.user.id,
						},
						success: res => {
							res = res.res;
							if(res.code===1){
								this.liveData.is_follow = !this.liveData.is_follow;
							}else{
								uni.showToast({title: res.msg, icon: 'error'});
							}
						}
					});	
					
				} else {
					this.$wanlshop.to('/pages/user/auth/auth');
				}
				
			},
			numFormat(num) {
				return num > 9999 ? ((num - num % 1000) / 10000 + '万') : num
			},
			formatEllipsis(str = '', limitLen = 24) {
				let len = 0,
				reg = /[\x00-\xff]/, //半角字符的正则匹配
				strs = str.split(''),
				inx = strs.findIndex(s => {
					len += reg.test(s) ? 1 : 2
					if (len > limitLen) return true
				})
			    return inx === -1 ? str : str.substr(0, inx) + '...'
			}
		}
	}
</script>

<style>

.live-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-direction: row;
	padding-top: 16rpx;
	padding-left: 24rpx;
	padding-right: 24rpx;
	/* #ifdef MP */
	padding-right: 220rpx;
	/* #endif */
}
	
.header-right{
	display: flex;
	align-items: center;
	flex-direction: row;
	background-color: rgba(0,0,0,.2);
	padding-top: 8rpx;
	padding-right: 16rpx;
	padding-bottom: 8rpx;
	padding-left: 8rpx;
	border-radius: 5000upx;
}

.header-image{
	width: 68rpx;
	height: 68rpx;
	border-radius: 50%;
}

.header-image-img{
	width: 68rpx;
	height: 68rpx;
	border-radius: 50%;
}

.header-shop{
	padding-left: 15rpx;
}

.header-shop-text{
	color: rgba(255, 255, 255, .8);
	font-size: 28rpx;
	line-height: 36rpx;
	max-width: 100rpx;
}

.header-shop-info-text{
	color: rgba(255, 255, 255, .7);
	font-size: 20rpx;
}

.header-btn{
	background: #f40;
	height: 50rpx;
	justify-content: center;
	align-items: center;
	border-radius: 18rpx;
	margin-left: 30rpx;
	padding: 0rpx 20rpx;
}

.header-btn-text{
	color: #fff;
	font-size: 24rpx;
}

.close-image{
	width: 50rpx;
	height: 50rpx;
}

.onlineBox{
	background: #ffffff;
	height: 50rpx;
	border-radius: 30rpx;
	margin-left: 30rpx;
	padding: 0rpx 20rpx;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 24rpx;
	background: rgba(0,0,0,0.2);
	color: white;
}

.header-left{
	display: flex;
	flex-direction: row;
}
.image-box{
	display: flex;
	flex-direction: row;
}
.userImage{
	width: 58rpx;
	height: 58rpx;
	border-radius: 50%;
	margin-right: 10rpx;
}
.online_num_box{
	min-width: 60rpx;
	height: 60rpx;
	background: rgba(0,0,0,0.2);
	border-radius: 30rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-right: 30rpx;
	color:#ffffff !important;
}
.online_num{
	color:#ffffff !important;
}
</style>
